Windows平台搭建React Native开发环境

文章概述

本篇文章记录Windows平台搭建React Native开发环境。

安装git

可以使用git提供的项目版本控制和命令行工具

安装nodejs

安装

nodejs官网下载nodejs进行安装，可以是推荐版本或者最新版本，官网提示避免7.1版本的nodejs.

如果安装nodejs时，没有选择add nodejs to path自动配置环境变量，需要配置nodejs的根目录作为环境变量，如：“Nodejs\”。

验证安装

执行如下命令，显示相应信息说明安装成功：

1 2	$ nodejs -v //显示nodejs对应版本说明安装成功； $ npm -v //显示nodejs自带包管理工具npm的版本；

配置npm镜像

配置npm的镜像地址，可以加速npm.

配置方法：

命令配置：执行如下两条命令。

1 2	$ npm config set registry https://registry.npm.taobao.org --global $ npm config set disturl https://npm.taobao.org/dist --global

本地配置：修改nodejs\node_modules\npm\npmrc
npmrc文件，在文件的最后一行添加：

1	$ registry=https://registry.npm.taobao.org

安装Yarn、React Native的命令行工具(react-native-cli)

yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。

react-native-cli是React Native的命令行工具，用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

备注：也可以不用安装Yarn,官网推荐安装。

yarn和react-native-cli同时安装的安装命令：

1	$ npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源：

1 2	$ yarn config set registry https://registry.npm.taobao.org --global $ yarn config set disturl https://npm.taobao.org/dist --global

配置Android开发环境

安装android sdk、android ndk、android studio。
配置环境变量

新建如下环境变量：

ANDROID_HOME=android-sdk/
ANDROID_NDK=android-ndk/

Path中新增环境变量：

jdk/bin
%ANDROID_HOME%
%ANDROID_NDK%
mingw/bin (==c语言支持库==)
android-sdk/tools
android-sdk/platform-tools
nodejs/
gradle-3.5/bin (==主要用于方便使用gradle命令==)

Android开发推荐安装工具

Gradle Daemon

开启Gradle Daemon可以极大地提升java代码的增量编译速度。

执行如下命令

$ (if not exist “%USERPROFILE%/.gradle” mkdir “%USERPROFILE%/.gradle”) && (echo org.gradle.daemon=true >> “%USERPROFILE%/.gradle/gradle.properties”)

创建react-native项目

使用如下命令创建项目：

1 2	$ react-native init AwesomeProject //创建react-native项目 $ cd AwesomeProject //进入项目根目录

简单的运行react-native项目到手机

方式一

命令行的方式

1	$ react-native run-android //安装项目到安卓设备，同时启动react-native服务

安装release版应用

1	$ react-native run-android --variant=release //需要配置签名

启动本地服务后，打开安装好的app，在app的menu菜单中选择reload来同步服务中的代码。
如果是真机，需要打开react-native应用的“允许应用显示悬浮窗”权限。
在终端下运行命令查看应用对应的日志：

1	$ adb logcat *:S ReactNative:V ReactNativeJS:V

方式二

运行项目根目录中android目录的项目到android studio上，编译安装应用到手机设备；
命令单独启动react-native服务

1	$ react-native start

悬浮菜单reload项目，及时查看效果；

真机上运行项目细节

【1】确保有且仅有一个手机USB连接到电脑：通过adb devices命令检查连接：

$ adb devices
List of devices attached
emulator-5554 offline   # Google模拟器
14ed2fcc device         # 真实设备

【2】安装android项目到手机，打开悬悬浮窗权限，启动react-native本地服务；
【3】android 5.0以上系统：

注意，这个选项只能在5.0以上版本(API 21+)的安卓设备上使用。

首先把你的设备通过USB数据线连接到电脑上，并开启USB调试（关于如何开启USB调试，参见上面的内容）。

运行命令设置手机访问的端口号：

1	$ adb reverse tcp:8081 tcp:8081

摇晃设备，或者运行命令

1	$ adb shell input keyevent 82

就可以打开开发者悬浮窗菜单，使用Reload JS实时查看应用效果了。

【4】android 5.0以下系统：

首先确保你的电脑和手机设备在同一个Wi-Fi环境下。
在设备上运行你的React Native应用。和打开其它App一样操作。
你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。
摇晃设备，或者运行adb shell input keyevent 82，可以打开开发者菜单。
点击进入Dev Settings。
点击Debug server host for device。
输入你电脑的IP地址和端口号（譬如10.0.1.1:8081）。在Mac上，你可以在系统设置/网络里找查询你的IP地址。在Windows上，打开命令提示符并输入ipconfig来查询你的IP地址。在Linux上你可以在终端中输入ifconfig来查询你的IP地址。
回到开发者菜单然后选择Reload JS。

上传项目到github

.gitignore中添加如下忽略内容

node_moudles
package-lock.json

在nodejs 8.x后会生成package-lock.json文件，此文件不需要上传，可以删掉；
原因：
nodejs升级到8.x后npm也升级到了5.x版本，相应的，当 node_modules 或 package.json 发生变化时自动生成package-lock.json文件，这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。对比之下，大概是想做类似 Yarn 的功能。
坑：如果手动修改了 package.json 文件中已有模块的版本，直接执行npm install不会安装新指定的版本，只能通过npm install xxx@yy更新。

上传项目到github等仓库。

运行别人的react-native项目

步骤：

切换到项目根目录；
执行命令：npm install(这个是用来下载node_moudles文件夹的，这个文件夹一般不上传的)；
启动react-native服务，运行app查看效果；